<script setup>
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
    } from '@element-plus/icons-vue'
    import menus from './assets/menu'
    import {ref} from 'vue'
    const myMenus = ref(menus)
</script>
<template>
    <el-container class="layout-container-demo" style="height: 500px">
        <el-header>
            <span style="font: 22px 方正粗黑宋简体;color:white;float:left;margin-top: 30px;margin-left: -10px;">练习-后台管理系统</span>
            <span>◆ Vue3 + Vite2 + Element-Plus + SpringBoot前后端分离开发●</span>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        :default-active="$route.path"
                        text-color="#fff"
                        router>
                    <el-sub-menu :index="menu.id" v-for="menu in myMenus">
                        <template #title>
                            <!--<el-icon class="Plus"></el-icon>-->
                            <component :is="menu.icon" style="width: 16px;height: 16px;"/>
                            <span style="text-indent: 4px;">{{menu.text}}</span>
                        </template>
                        <el-menu-item :index="menu.path + '/' + m.path" v-for="m in menu.children">
                            <component :is="m.icon" style="width: 16px;height: 16px;"/>
                            <span style="text-indent: 4px;">{{m.text}}</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>

</template>

<style scoped>
    #app {
        width: 100%;
    }

    .layout-container-demo .el-header {
        height: 80px;
        line-height: 80px;
        text-align: right;
        background-color: #545c64;
        color: rgb(255,182,78);
    }
    .layout-container-demo .el-aside {
        color: var(--el-text-color-primary);
        background: var(--el-color-primary-light-8);
        height: 500px;
    }

    .layout-container-demo .el-menu {
        border-right: none;
    }

    .layout-container-demo .el-main {
        padding: 0;
    }
</style>
